<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <link rel="stylesheet" href="../css/laydate.css">
    <style>
        .pageBody {
            display: flex;
            flex: 1;
        }
        .left {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .left > div {
            flex: 1;
            height: 50%;
        }
        .right {
            flex: 2;
            display: flex;
            flex-direction: column;
        }
        .topBox {
            flex: 3;
            display: flex;
            flex-direction: row;
            height: 30%;
        }
        .topBox > div {
            flex: 1;
        }
        .bottomBox {
            flex: 7;
            height: 70%;
        }
        /*newsInformation 最新资讯*/
        .newsInformation {
            width: 100%;
            margin: 5% 10%;
            height: 100%;
        }
        .newsInformation li{
            height: 33.33%;
            line-height: 33.33%;
        }
        .newsInformation li a, .newsInformation li span {
            font-size: 0.8rem;
        }
        .newsInformation li span {
            margin-right: .8rem;
        }
        .newsInformation li>a:hover {
            color: var(--themeBlue);
        }
        /*舆情详情*/
        .customerSelect {
            padding: 0.5rem 1rem;
        }
        .btnGroup1 {
            margin-top: 10px;
        }
        .timeUstyle {
            background: transparent;
            border: 2px solid #00abde;
            width: 9rem;
            border-radius: 0.1rem;
            height: 28%;
            line-height: 28%;
        }
        .endTimeContent {
            margin-left: 5%;
        }
        /*修改输入框 placeholder字体颜色 start*/
        input:-moz-placeholder,
        textarea:-moz-placeholder {
            color: #fff;
            vertical-align: middle;
        }
        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #fff;
            vertical-align: middle;
        }
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #fff;
            vertical-align: middle;
        }
        /*修改输入框 placeholder字体颜色 END*/
        /*customerInformationList start*/
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        a {
            text-decoration: none;
        }
        li {
            float: left;
            list-style: none;
        }
        .left {
            width: 100%;
        }
        .left > h2 > span {
            font-size: 1rem;
            font-weight: normal;
        }
        .left > ul > li {
            width: 100%;
            color: #756F71;
            padding: .3rem 0.1rem;
            font-size: 12px;
        }
        .left > ul > li > .pic {
            width: 16%;
            height: 16%;
            margin: 1%;
        }
        .left > ul > li > div > img {
            width: 100%;
            height: 100%;
            margin-left: 0.5rem;
        }
        .left > ul > li > p {
            width: 100%;
            padding: 0.2rem 0.2rem;
        }
        .left > ul > li > p > .neirong {
            margin: 0.1rem 0 0.5rem 0;
            color: #fff;
            font-size: 14px;
        }
        .left > ul > li > p > span {
            line-height: 1.3rem;
            display: inline-block;
            margin: 0 .5rem .5rem .5rem;
        }
        .bgi4 {
            background: url("../img/03_05shengyufengxian/lticn_eye.png") no-repeat left center;
            padding-left: 0.8rem;
            width: 0.05rem;
            background-size: contain;

        }
        .left > ul > li > p > a:first-child {
            display: block;
            font-size: 0.95rem;
            font-weight: bold;
            margin-bottom: 0.5rem   ;
        }
        .left > ul > li > p a {
            margin-left: 0.3rem;
            color: #fff;
        }
        /*查询*/
        .yuqingsearch{
            padding:0rem 2rem;
            background: #00abde;
            border: 2px solid #00abde;
            margin-top: 50%;
            border-radius: 0.1rem;
        }
        /*舆情详情 图片展示区*/
        .customerInformationList {
            width: 100%;
            height: 75%;
            /*background: #00ff00;*/
        }

        .leftBox {
            width: 100%;
            height: 20rem;
            overflow: auto;
        }

        /*舆情详情 输入框*/
        .customerInformation {
            width: 100%;
            height: 25%;
            padding: 1rem 0rem;
            border-bottom: 1px solid #00adef;
        }
        .customerInformationleft,.customerInformationmiddle{
            width: 33.33%;
            height: 100%;
        }
        .mySelect{
            width: 9rem;
        }
        .myOptionBox{
            width: 9rem;
            height: 3.5rem;
            overflow: auto;
        }
        .mySelect .myOption{
            width: 9rem;
        }
        /*关键字输入框*/
        .gjz{
            width: 9rem;
            background: transparent;
            border: 2px solid #00abde;
            border-radius: 0.1rem;
        }


    </style>
</head>
<body id="03_05shengyufengxian" data-title="管理风险">
<div class="container1">
    <h2 hidden>声誉风险</h2>
    <div class="pageBody">
        <div class="left">
            <div class="left-top">
                <div class="chartBox ec001">
                    <div class="chartTitle">
                        <h3>市场舆情概览</h3>
                    </div>
                    <div class="chartContent">
                        <div class="chartBody">
                            <div id="ec_03_05shichangyuqinggailan"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-bottom">
                <div class="chartBox ec002">
                    <div class="customerSelect">
                        <div class="btnGroup btnGroup1">
                            <button class="active">纠纷客户名单</button>
                            <button>客户黑名单</button>
                        </div>
                    </div>
                    <div class="customerInformationList">
                        <table>
                            <thead>
                            <tr>
                                <th>时间</th>
                                <th>投诉人</th>
                                <th>投诉电话</th>
                                <th>投诉原因</th>
                                <th>查看详情</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>20180307</td>
                                <td>王建国</td>
                                <td>15866775312</td>
                                <td>交易市场</td>
                                <td class="more"><a href=""> 查看</a></td>
                            </tr>
                            <tr>
                                <td>20180307</td>
                                <td>李军</td>
                                <td>15347859123</td>
                                <td>交易市场</td>
                                <td class="more"><a href=""> 查看</a></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="topBox">
                <!--实时舆情-->
                <div class="topBox1">
                    <div class="chartBox ec002">
                        <div class="chartTitle">
                            <h3>实时舆情</h3>
                        </div>
                        <div class="chartContent">
                            <div class="chartBody">
                                <div id="ec_shishiyuqing001"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--最新资讯-->
                <div class="topBox2">
                    <div class="chartBox ec002">
                        <div class="chartTitle">
                            <h3>最新资讯</h3>
                        </div>
                        <div class="chartContent">
                            <div class="chartBody">
                                    <ul class="newsInformation">
                                        <li><a href="#">期货日报:上市钢企积极参与期货套保</a></li>
                                        <li><a href="#">我省小额贷款公司以惠普金融支农支小</a></li>
                                        <li><a href="#">全国小贷贷款公司去年减少122家</a></li>

                                    </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右下侧部分  舆情详情-->
            <div class="bottomBox">
                <div class="chartBox ec002">
                    <div class="chartTitle">
                        <h3>舆情详情</h3>
                    </div>
                    <!--舆情详情-->
                    <div class="chartContent">
                        <div class="chartBody chartBody1">
                            <div class="customerInformation">
                                <div class="customerInformationleft fl">
                                    <div class="inputGroup fl">
                                        <label class="jiaoyishichang">交易市场:</label>&nbsp;&nbsp;
                                        <div class="mySelect" id="jiaoyishichang">
                                            <div class="myOption selected"><span class="text"></span><span class="icon"></span></div>
                                            <ul class="myOptionBox">
                                                <li class="myOption selected">海尔小额贷款</li>
                                                <li class="myOption">蚂蚁小额贷款</li>
                                                <li class="myOption">汇金小额贷款</li>
                                                <li class="myOption">西岸小额贷款</li>
                                                <li class="myOption">中鸿小额贷款</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <div class="inputGroup fl">
                                        <label for="BeginTime">开始时间：</label>
                                        <input placeholder="请输入开始日期" id="BeginTime" class="laydate-icon timeUstyle stateUTime"
                                               onclick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})">
                                    </div>
                                </div>
                                <div class="customerInformationmiddle fl">
                                    <div class="inputGroup fl">
                                        <label class="guanjianzi">关键字:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="text" class="gjz">
                                    </div>
                                    <br>
                                    <br>
                                    <div class="inputGroup fl">
                                        <label for="EndTime">结束时间：</label>
                                        <input placeholder="请输入开始日期" id="EndTime" class="laydate-icon timeUstyle stateUTime"
                                               onclick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})">
                                    </div>
                                </div>
                                <div class="customerInformationright fl">
                                    <div class="inputGroup">
                                        <button class="yuqingsearch">查询</button>
                                    </div>
                                </div>
                            </div>
                            <div class="customerInformationList">
                                <div class="left fl">
                                    <ul class="leftBox">
                                        <li>
                                            <!--<div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>-->
                                            <p class="fr">
                                                <a href="#">官方发文规范民间借贷：“校园贷”成重点规范对象</a>
                                                <span class="neirong">近日，银保监会、公安部等四部门联合发布《关于规范民间借贷行为维护经济金融秩序有关事项的通知》(以下简称《通知》)。《通知》要求，未经有权机关依法批准，任何单位和个人不得设立从事或者主要从事发放贷款业务的机构或以发放贷款为日常业务活动，并划定了四条监管“红线”。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source1">中国证券报</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">民间借贷</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2018-05-07 12:26</span>
                                            </p>
                                        </li>
                                        <li>
                                            <!--<div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>-->
                                            <p class="fr">
                                                <a href="#">2017年消费金融公司净利润 TOP16：累计净利润或达300亿元</a>
                                                <span class="neirong">实现净利润4,769万元，较之2016年度的4,435万元增幅为7.5%。 中金普惠副总裁夏勇曾对第一消费金融表示，海尔的金融板块中，保理、融资租赁、供应链这些做得还不错，代表是海尔云贷和海尔保理，而消费金融并非海尔的重心。据业内人士提供的数据，截至2017年12月21日，海尔云贷累计放款320.19亿元，当年的放款额达到166.94亿元。 NO.16 晋商消费金融 营业收入：0.3亿元 ...</span>
                                                <span>来源:</span><a href="#" class="bgi1 source1">微信</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">微信云</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2018-05-07 12:26</span>
                                            </p>
                                        </li>
                                        <li>
                                            <!--<div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>-->
                                            <p class="fr">
                                                <a href="#">2017年消费金融公司净利润 TOP16：累计净利润或达300亿元</a>
                                                <span class="neirong">实现净利润4,769万元，较之2016年度的4,435万元增幅为7.5%。 中金普惠副总裁夏勇曾对第一消费金融表示，海尔的金融板块中，保理、融资租赁、供应链这些做得还不错，代表是海尔云贷和海尔保理，而消费金融并非海尔的重心。据业内人士提供的数据，截至2017年12月21日，海尔云贷累计放款320.19亿元，当年的放款额达到166.94亿元。 NO.16 晋商消费金融 营业收入：0.3亿元 </span>
                                                <span>来源:</span><a href="#" class="bgi1 source1">中国证券报</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">微信</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2018-05-07 12:26</span>
                                            </p>
                                        </li>
                                        <li>
                                            <!--<div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>-->
                                            <p class="fr">
                                                <a href="#">官方发文规范民间借贷：“校园贷”成重点规范对象</a>
                                                <span class="neirong">近日，银保监会、公安部等四部门联合发布《关于规范民间借贷行为维护经济金融秩序有关事项的通知》(以下简称《通知》)。《通知》要求，未经有权机关依法批准，任何单位和个人不得设立从事或者主要从事发放贷款业务的机构或以发放贷款为日常业务活动，并划定了四条监管“红线”。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source1">中国证券报</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">民间借贷</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2018-05-07 12:26</span>
                                            </p>
                                        </li>
                                        <li>
                                            <!--<div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>-->
                                            <p class="fr">
                                                <a href="#">官方发文规范民间借贷：“校园贷”成重点规范对象</a>
                                                <span class="neirong">近日，银保监会、公安部等四部门联合发布《关于规范民间借贷行为维护经济金融秩序有关事项的通知》(以下简称《通知》)。《通知》要求，未经有权机关依法批准，任何单位和个人不得设立从事或者主要从事发放贷款业务的机构或以发放贷款为日常业务活动，并划定了四条监管“红线”。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source1">中国证券报</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">民间借贷</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2018-05-07 12:26</span>
                                            </p>
                                        </li>
                                        <li>
                                            <!--<div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>-->
                                            <p class="fr">
                                                <a href="#">官方发文规范民间借贷：“校园贷”成重点规范对象</a>
                                                <span class="neirong">近日，银保监会、公安部等四部门联合发布《关于规范民间借贷行为维护经济金融秩序有关事项的通知》(以下简称《通知》)。《通知》要求，未经有权机关依法批准，任何单位和个人不得设立从事或者主要从事发放贷款业务的机构或以发放贷款为日常业务活动，并划定了四条监管“红线”。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source1">中国证券报</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">民间借贷</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2018-05-07 12:26</span>
                                            </p>
                                        </li>
                                        <li>
                                            <!--<div class="fl pic"><img src="../img/03_05shengyufengxian/02.png"></div>-->
                                            <p class="fr">
                                                <a href="#">官方发文规范民间借贷：“校园贷”成重点规范对象</a>
                                                <span class="neirong">近日，银保监会、公安部等四部门联合发布《关于规范民间借贷行为维护经济金融秩序有关事项的通知》(以下简称《通知》)。《通知》要求，未经有权机关依法批准，任何单位和个人不得设立从事或者主要从事发放贷款业务的机构或以发放贷款为日常业务活动，并划定了四条监管“红线”。</span>
                                                <span>来源:</span><a href="#" class="bgi1 source1">中国证券报</a>
                                                <span>|</span>
                                                <span>涉及词:</span><a href="#">民间借贷</a>
                                                <span class="bgi4"><a href="#">256</a></span>
                                                <span class="fr bgi2">2018-05-07 12:26</span>
                                            </p>
                                        </li>
                                        <br>
                                        <br>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/pageCom.js"></script>
<script src="../js/chartsCom.js"></script>
<script src="../js/laydate.js"></script>
<script>
    var allCharts = [];
    $(function () {
        //市场舆情浏览 模块一
        var fxyq001 = echarts.init($("#ec_03_05shichangyuqinggailan")[0]);
        fxyq001.setOption(opt_pie);
        fxyq001.setOption({
            legend: {
                show:false
            },
            series: [
                {
                    name: '高管资质',
                    type: 'pie',
                    radius: '50%',
                    center: ['48%', '45%'],
                    data: [
                        {value: 14, name: '海尔小额贷款'},
                        {value: 16, name: '蚂蚁小额贷款'},
                        {value: 18, name: '汇金小额贷款'},
                        {value: 22, name: '西岸小额贷款'},
                        {value: 22, name: '中鸿小额贷款'}
                    ]
                }
            ]
        });
        //实时舆情
        var fxyq002 = echarts.init($("#ec_shishiyuqing001")[0]);
        fxyq002.setOption(opt_com);
        fxyq002.setOption(opt_line);
        fxyq002.setOption({
            legend: {
                show: false
            },
            grid: {
                top: '20%',
                left: '10%',
                right: '10%',
                bottom: '20%'
            },
            xAxis: {
                name: '日',
                // type: 'category',
                // boundaryGap: false,
                data: ['9-12', '9-13', '9-14', '9-15', '9-16', '9-17', '9-18', '9-19']
            },
            yAxis: {
                name: '热度值',
                type: 'value'

            },
            series: [
                {
                    name: '平均单笔贷款',
                    type: 'line',
                    symbol: 'circle',
                    data: [200, 255, 290, 320, 380, 430, 470, 490],
                    areaStyle: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: colors[0] // 0% 处的颜色
                            }, {
                                offset: 1, color: '#00adef11' // 100% 处的颜色
                            }]
                        }
                    }
                }

            ]
        });
        //当前时间
        //本页所有图表
        allCharts = [fxyq001, fxyq002];
    });

</script>
</body>
</html>
